<script setup lang="ts">
const ondragstart = (e: DragEvent) => {
    if(e.dataTransfer){
        e.dataTransfer.effectAllowed = 'move';
    }
    // if(e.target){
    //     (e.target as HTMLElement).style.
    // }
    console.log((e.target as HTMLElement).dataset.index, 'drag-start');
};
const ondrag = (e: DragEvent) => {
    console.log((e.target as HTMLElement).dataset.index, 'drag');
};
const ondragend = (e: DragEvent) => {
    console.log((e.target as HTMLElement).dataset.index, 'drag-end');
};
const ondragenter = (e: DragEvent) => {
    if(e.dataTransfer){
        // e.dataTransfer.dropEffect = 'link';
    }
    e.preventDefault();
    console.log((e.target as HTMLElement).dataset.index, 'drag-enter');
};
const ondragover = (e: DragEvent) => {
    if(e.dataTransfer){
        // e.dataTransfer.dropEffect = 'link';
    }
    e.preventDefault();
    console.log((e.target as HTMLElement).dataset.index, 'drag-over');
};
const ondragleave = (e: DragEvent) => {
    console.log((e.target as HTMLElement).dataset.index, 'drag-leave');
};
const ondrop = (e: DragEvent) => {
    console.log(e);
    console.log((e.target as HTMLElement).dataset.index, 'drop');
};
</script>
<template>
	<div class="container">
		<div
			data-index="1"
			class="drag-target"
			draggable="true"
			@dragstart="ondragstart"
			@drag="ondrag"
			@dragend="ondragend"
		/>
		<div
			data-index="2"
			class="drag-target"
			draggable="true"
			@dragstart="ondragstart"
			@drag="ondrag"
			@dragend="ondragend"
		/>
		<div
			data-index="3"
			class="drag-target"
			draggable="true"
			@dragstart="ondragstart"
			@drag="ondrag"
			@dragend="ondragend"
		/>
		<div
			data-index="4"
			class="drag-target"
			droppable="true"
			@dragenter="ondragenter"
			@dragover="ondragover"
			@dragleave="ondragleave"
			@drop="ondrop"
		/>
	</div>
</template>
<style lang="scss">
.container{
    display: flex;
    padding: 10px;
    .drag-target{
        width: 100px;
        height: 100px;
        background-color: #000;
        margin-right: 10px;
    }
}
    
</style>